<template>
  <div class="club-card" :class="{ 'club-card--highlight': highlight }">
    <div class="club-card__header">
      <img :src="clubInfo.logo" alt="俱乐部logo" class="club-card__logo">
      <div class="club-card__info">
        <h3 class="club-card__name">{{ clubInfo.name }}</h3>
        <p class="club-card__leader">领队: {{ clubInfo.leader }}</p>
      </div>
      <div class="club-card__score">
        <span class="club-card__score-label">积分</span>
        <span class="club-card__score-value">{{ clubInfo.score }}</span>
      </div>
    </div>
    <div class="club-card__description">{{ clubInfo.description }}</div>
    <div class="club-card__actions" v-if="showActions">
      <button class="club-card__btn club-card__btn--support" @click="onSupport">助力</button>
      <button class="club-card__btn club-card__btn--share" @click="onShare">分享</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  clubInfo: {
    type: Object,
    required: true,
    default: () => ({
      logo: '',
      name: '',
      leader: '',
      score: 0,
      description: ''
    })
  },
  highlight: {
    type: Boolean,
    default: false
  },
  showActions: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['support', 'share']);

const onSupport = () => {
  emit('support', props.clubInfo);
};

const onShare = () => {
  emit('share', props.clubInfo);
};
</script>

<style lang="scss">
@import './ClubCard.scss';
</style>